<template>
    <div>
        <Badge class="cook-badge gray" 
                    :class="badgeClass"
                    :id="0">
        </Badge>
        <div class="diet" v-if="cookerInfo.state==1" :class="badgeClass" >
            <div class="progress"
                v-if="cookerInfo.state == 1"
                :class="progressClass"
                :style="countWidth"
            ></div>
            <p>{{ names.get(Array.from(cookerInfo.task)[0][0])}}</p>
        </div>
        <i class="func-btn" v-if="status == 'wait'">
            <img v-if="status == 'wait'" src="../assets/cooked.png">
        </i>
    </div>
</template>

<script>
import Badge from './Badge.vue'
    export default {
        name: 'Cook',
        components:{
            Badge
        },
        props:{
            cookerInfo:Object,
            times:Map,
            names:Map,
            curTime:Number,
            maxWaitTime:Number
        },
        computed:{
          status(){
            if(!this.cookerInfo.state){
                return 'free'
            }
            
            if(!Array.from(this.cookerInfo.task)[0][1]){
                return 'cooking' 
            }
            
            return 'wait'
          },
          badgeClass(){
              return {
                  free:this.status == 'free',
                  cooking: this.status == 'cooking',
                  wait:this.status == 'wait'
              }
          },
          progressClass(){
              return{
                  cooked:this.status == 'cooking',
                  waited: this.status == 'wait'
              }
          },
          countWidth(){
              let dietId = Array.from(this.cookerInfo.task)[0][0]
              if(this.status == 'cooking'){
                  let val = (this.curTime - this.cookerInfo.startTime) * 100/this.times.get(dietId)
                  return `width: ${val>= 100 ? 100:val}%`
              }

              if(this.status == 'wait'){
                  let val = (this.curTime - this.cookerInfo.finishTime) * 100/this.maxWaitTime
                  return `width: ${val>= 100 ? 100:val}%`
              }

              return ""
          }
          
        }
    }
</script>

<style scoped>

    .cook .diet{
        position: absolute;
        bottom: -40px;
        width: 100%;
        line-height: 1.5;
        text-align: center;
        background-color: #ff9122;
        border: 8px solid #fff;
        font-size: 22px;
        font-weight: 800;
        color: #fff;
    }

    .diet>p{
        position: relative;
        z-index: 2;
    }

    .func-btn img{
        width: 100px;
        height: 100px;
    }

    .func-btn{
        position: absolute;
        left: 0;
        bottom: 0;
        transform: translateX(-30%);
    }

    .free{
        background-color: #dddddd;
    }

    .cooking{
        background-color: #ff9122;;
    }

    .cooked{
        background-color: #d96d00;
    }

    .wait{
        background-color: #ac91ff !important;
    }

    .waited{
        background-color: #7a4dff;
    }

    .progress{
        position: absolute;
        top: 0;
        bottom: 0;
    }
</style>